<template>
  <view class="btn-box">
    <TButton
      :text="text"
      type="none"
      @click="handleClick"
      :customStyle="{
        backgroundColor: '#FFF',
        color: '#2878FF',
        border: '1px solid #2878FF',
        fontSize: '24rpx',
      }"
      custom-class="h-24 linh-24 br-12"
    ></TButton>
    <view v-if="pointNum" :class="['badge-dot', pointNum > 99 ? 'badge-dot__max' : '']">
      <text>{{ pointNum > 99 ? '99+' : pointNum }}</text>
    </view>
  </view>
</template>
<script setup lang="ts">
  import TButton from '@/components/TButtonGroup/TButton.vue';
  const props = defineProps({
    text: {
      type: String,
      default: '',
    },
    pointNum: {
      type: Number,
      default: 0,
    },
  });
  const emit = defineEmits(['click']);
  const handleClick = () => {
    emit('click');
  };
</script>
<style lang="scss" scoped>
  .btn-box {
    position: relative;
    .badge-dot {
      position: absolute;
      top: -10%;
      right: -10%;
      width: 32rpx;
      height: 32rpx;
      background-color: #ea5e0e;
      color: #fff;
      border-radius: 50%;
      text-align: center;
      line-height: 32rpx;
      font-size: 16rpx;
      box-shadow: 2rpx 2rpx 2rpx 0px rgba(0, 0, 0, 0.2);
      &__max {
        border-radius: 24rpx;
        width: auto;
        padding: 0 8rpx;
      }
    }
  }
</style>
